<template>
  <div class="login">
    <div class="box">
      <div class="left"></div>
      <div class="right">
        <h1>前台注册</h1>
        <div class="content">
          <el-form :model="loginObj"
                   :rules="rules"
                   ref="loginForm">
            <el-form-item prop="email">
              <el-input prefix-icon="cxfont cx-yonghu1"
                        placeholder="邮箱"
                        v-model="loginObj.email"></el-input>
            </el-form-item>
            <el-form-item prop="username">
              <el-input prefix-icon="cxfont cx-yonghu1"
                        placeholder="用户名"
                        v-model="loginObj.username"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input prefix-icon="cxfont cx-mima"
                        placeholder="密码"
                        type="password"
                        v-model="loginObj.password1"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input prefix-icon="cxfont cx-mima"
                        placeholder="重复密码"
                        type="password"
                        v-model="loginObj.password2"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary"
                         class="botton"
                         @click="login">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import { loginAdmin } from '../../api/index';
import { md5 } from 'js-md5';
export default {
  data () {
    return {
      loginObj: {
        username: "",
        password1: "",
        password2: "",
        email: '',
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password1: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 18, message: "长度在 3 到 18 个字符", trigger: "blur" }
        ],
        password2: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 18, message: "长度在 3 到 18 个字符", trigger: "blur" }
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ]
      }
    };
  },
  methods: {
    ...mapMutations('login', ['setUserInfo']),
    login () {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          //表单验证通过
          // console.log(md5(this.loginObj.password))
          // var newLogin = {
          //   username: this.loginObj.username,
          //   password: md5(this.loginObj.password)
          // };
          // this.loginObj.password = md5(this.loginObj.password)
          loginAdmin(this.loginObj)
            .then(data => {
              if (this.password1 == this.password2) {
                //登陆成功
                console.log(1111111);
                // this.setUserInfo(data.data);
                this.$router.push({ name: 'homepage' })
              } else {
                this.$message({
                  message: '请输入正确用户名密码',
                  duration: 1000
                })
              }
            })
            .catch(err => {
              this.$message({
                message: '请求超时',
                duration: 1000
              });
            });
        } else {
          this.$message({
            message: '请输入正确的表单信息',
            duration: 1000,
            type: 'error'
          });
        }
      });
    }
  },
  computed: {
    ...mapState('login', ['userInfo', 'username'])
  },
  mounted () {
    // this.setUserInfo({ username: 'root' });
  }
};
</script>
<style lang="less" scoped>
.login {
  width: 100vw;
  height: 100vh;
  background: url("../../assets/beijing.jpg") repeat-x 0 bottom #049ec4;
  padding-top: 50px;
  box-sizing: border-box;
  animation: move 20s linear 0s infinite both;
  -webkit-animation: move 20s linear 0s infinite both;
  .box {
    width: 1000px;
    height: 500px;
    background-color: red;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    .left {
      width: 500px;
      height: 500px;
      background: #409eff;
      float: left;
    }
    .right {
      width: 500px;
      height: 500px;
      background: #fff;
      float: right;
      h1 {
        font-size: 30px;
        font-weight: 900;
        text-align: center;
        margin: 30px;
      }
      .content {
        width: 300px;
        margin: 0 auto;
        /deep/.el-input__inner {
          border: none;
          border-bottom: 1px solid #8fd26e;
          border-radius: 0;
          margin-bottom: 10px;
        }
        /deep/i {
          color: #c3c7cf !important;
        }
        .botton {
          width: 100%;
          margin-top: 30px;
        }
      }
    }
  }
}

@keyframes move {
  0% {
    background-position-x: 0px;
  }
  100% {
    background-position-x: -2000px;
  }
}
</style>